import React from "react";

/**
 * 进度条主题类型
 */
export type ThemeProps =
  | "primary"
  | "secondary"
  | "success"
  | "info"
  | "warning"
  | "danger"
  | "light"
  | "dark";

/**
 * Progress 组件属性接口
 */
export interface ProgressProps {
  /** 进度百分比 */
  percent: number;
  /** 进度条高度 */
  strokeHeight?: number;
  /** 是否显示进度文字 */
  showText?: boolean;
  /** 进度条样式 */
  styles?: React.CSSProperties;
  /** 进度条主题 */
  theme?: ThemeProps;
}

/**
 * Progress 进度条组件
 *
 * 显示任务的当前进度，支持多种主题样式
 *
 * @example
 * ```tsx
 * // 基本使用
 * <Progress percent={50} />
 *
 * // 自定义主题和高度
 * <Progress percent={75} theme="success" strokeHeight={20} />
 *
 * // 隐藏进度文字
 * <Progress percent={30} showText={false} />
 * ```
 *
 * @param props - Progress 组件属性
 * @returns 渲染的进度条
 */
export const Progress: React.FC<ProgressProps> = (props) => {
  const {
    percent,
    strokeHeight = 15,
    showText = true,
    styles,
    theme = "primary",
  } = props;

  return (
    <div className="viking-progress-bar" style={styles}>
      <div
        className="viking-progress-bar-outer"
        style={{ height: `${strokeHeight}px` }}
      >
        <div
          className={`viking-progress-bar-inner color-${theme}`}
          style={{ width: `${percent}%` }}
        >
          {showText && <span className="inner-text">{`${percent}%`}</span>}
        </div>
      </div>
    </div>
  );
};

export default Progress;
